<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="范珍">
        <title>vue进阶-13 axios</title>
        <script src='lib/vue.js'></script>
        <!--
            axios.js:是vue官方推荐的实现网络操作的
            一个js脚本库;
        -->
        <script src="lib/axios.js"></script>
    </head>
    <body>
        <div id='app'>
            <form @submit.prevent="commit">
                用户名 <input type="text" v-model="user.petname"> <br>
                密码 <input type="text" v-model="user.password"> <br>
                <input type="submit" value="登录">
            </form>
        </div>
        <script>
         new Vue({
            el:'#app',
            data:{
                user:{
                    petname:'',
                    password:''
                }
            },
            methods:{
                commit:function(){
                    // 提交数据
                     axios.post(
                         '/login',
                         this.user
                    ).then(function(res){
                        // 请求成功时的回调函数
                        // res.data:服务端返回的数据
                        console.log(res.data);

                    }).catch(function(error){
                        // 请求失败时的回调函数
                        console.log(error);
                    })
                }
            }
        })
        </script>
    </body>
</html>